<template>
    <div class="releasepromotion">
         <van-nav-bar
            :title="$route.query.msg==2 ? '发布招聘' : '推广招聘'"
            left-text=""
            fixed
            placeholder
            left-arrow
            @click-left="returns"
        ></van-nav-bar>
        <div class="contents" v-if="$route.query.msg==2">
            <div class="contents-title">
                <img src="../../assets/images/invite/shu.png" alt="">
                <span>个人统计</span>
            </div>
            <div class="contents-center">
                <div class="contents-center-item1">
                    <span>已发布职位数</span>
                    <p>{{fabutong.publish || 0}}位</p>
                </div>
                <div class="contents-center-item2">
                    <span>累计阅读数</span>
                    <p>{{fabutong.read || 0}}次</p>
                </div>
                <div class="contents-center-item3">
                    <span>累计转发数</span>
                    <p>{{fabutong.transpond || 0}}份</p>
                </div> 
            </div>
        </div>
         <div class="contents" v-if="$route.query.msg==1">
            <div class="contents-title">
                <img src="../../assets/images/invite/shu.png" alt="">
                <span>推广统计</span>
            </div>
            <div class="contents-center">
                <div class="contents-center-item1">
                    <span>可推广职位数</span>
                    <p>{{tuiguang.publish || 0}}位</p>
                </div>
                <div class="contents-center-item2">
                    <span>剩余赏金</span>
                    <p>{{tuiguang.moneyReward || 0}}元</p>
                </div>
                <div class="contents-center-item3">
                    <span>已发出赏金</span>
                    <p>{{tuiguang.transmit || 0}}元</p>
                </div>
            </div>
        </div>

        <div class="contentsss" v-if="$route.query.msg==1">
            <div class="contents-title">
                <div class="content-left">
                    <img src="../../assets/images/invite/shu.png" alt="">
                    <span>招聘列表</span>
                </div>
            </div>
            <div class="contents-center" v-if="recruitmentArr.length">
                <van-list
                    v-model="loading1"
                    :finished="finished1"
                    finished-text="没有更多了"
                    @load="onLoad1"
                >
                    <van-cell-group v-for="(item,index) in recruitmentArr" :key="index" @click="$router.push({path:'/recruitmentdetails',query:{id:item.id,type:2}})">
                        <div class="contents-center-item">
                            <div class="imgs">
                                <img
                                    src="../../assets/images/task/getMoney.png"
                                    alt=""
                                    class="money"
                                    v-show="item.type == 9"
                                />
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="contents-b-item">
                            <div class="left">
                                    <div class="title">
                                        <h3>{{item.title}}</h3>
                                    </div>
                                    <div class="content">
                                        <p>{{item.describes}}</p>
                                    </div>
                                    <div class="contents-text">
                                        <div class="contents-text-item">
                                            <img src="../../assets/images/invite/fenxiang.png" alt="">
                                            <p>转发：{{item.share || 0}}次</p>
                                        </div>
                                        <div class="contents-text-item" @click.stop="goDetail(item)">
                                            <img src="../../assets/images/invite/yuedu.png" alt="">
                                            <p>阅读：{{item.score || 0}}次</p>
                                        </div>
                                        <div class="contents-text-item">
                                            <p style="margin-top:2px">{{item.gmtCreate.substring(0,11)}}</p>
                                        </div>
                                    </div>
                            </div>
                            </div>
                        </div>
                    </van-cell-group>
                </van-list>
            </div>
              <van-empty
                description="当前暂无招聘内容~"
                class="custom-image"
                :image="require('../../assets/dafault/noinvite.png')"
                v-else
            >
                <van-button round type="danger" class="bottom-button" @click="goAdd"
                >去新建招聘</van-button>
            </van-empty>
        </div>

        <div class="contentsss" v-if="$route.query.msg==2">
            <div class="contents-title">
                <div class="content-left">
                    <img src="../../assets/images/invite/shu.png" alt="">
                    <span>招聘列表</span>
                </div>
                <div class="content-right" @click="$router.push({path:'/addRecruitment'})">
                    <span>新建招聘</span>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="contents-center" v-if="recruitmentArrs.length!=0">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <div class="contents-center-item" v-for="(item,index) in recruitmentArrs" :key="index" @click.prevent="$router.push({path:'/recruitmentdetail',query:{id:item.id}})">
                        <div class="imgs">
                            <img
                                src="../../assets/images/task/getMoney.png"
                                alt=""
                                class="money"
                                v-show="item.type == 9"
                            />
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="contents-b-item">
                            <div class="left">
                                <div class="title">
                                    <h3>{{item.title}}</h3>
                                </div>
                                <div class="content">
                                    <p>{{item.describes}}</p>
                                </div>
                                <div class="bottom">
                                    <div class="lefts">
                                        <div class="img1">
                                            <img v-if="item.audit==0" src="../../assets/images/invite/weishenhe.png" alt="">
                                            <img v-if="item.audit==1" src="../../assets/images/invite/shenhezhong.png" alt="">
                                            <img v-if="item.audit==2" src="../../assets/images/invite/yishenhe.png" alt="">
                                        </div>
                                        <div class="img2">
                                            <img v-if="item.status==2" src="../../assets/images/invite/yishangjia.png" alt="">
                                            <img v-if="item.status==1" src="../../assets/images/invite/weishangjia.png" alt="">
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
            <van-empty
                description="当前暂无招聘内容~"
                class="custom-image"
                :image="require('../../assets/dafault/noinvite.png')"
                v-else
            >
                <van-button round type="danger" class="bottom-button" @click="goAdd"
                >去新建招聘</van-button>
            </van-empty>
         
        </div>
    </div>
</template>
<script>
export default {
    name:"releasepromotion",
    data(){
        return{
            checked:[],
            recruitmentArr:[],
            recruitmentArrs:[],
            tuiguang:{},
            fabutong:{},
            inviteShow:false,
            statusObj:{},
            isPower:3,
            wxUserInfo:{},
            info:"",
            loading: false, //加载状态
            finished: false, //完成
            page: 1, //页数
            limit: 8, //条数
            loading1: false, //加载状态
            finished1: false, //完成
            page1: 1, //页数
            limit1: 8, //条数
            totalPage1:"",
            totalPage:"",
        }
    },
    async mounted(){
        this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));
        this.isCustomer();
        if(this.$route.query.msg==2){
            this.fabutongji() 
            this.getRecruitss()
        }else{
            this.getPromotionStatistics()
            this.getRecruits()
        }
        
    },
    methods:{
       //触底下一页
        onLoad() {
            if (this.page >= this.totalPage) {
                this.finished = true;
                return;
            }
            this.page++;
            this.getRecruitss();
            // 加载状态结束
            this.loading = false;
        },
        //触底下一页
        onLoad1() {
            if (this.page1 >= this.totalPage1) {
                this.finished1 = true;
                return;
            }
            this.page1++;
            this.getRecruits();
            // 加载状态结束
            this.loading1 = false;
        },
          //点击跳转详情
        goDetail(item) {
            if (this.isPower == 3) return this.$toast("权限不足！");
            let obj = {
                cover:item.cover,
                title:item.title,
                description:item.describes,
                share:item.share,
                score:item.score,
                gmtCreate:item.gmtCreate,
            };
            sessionStorage.setItem("taskDetail", JSON.stringify(obj));
            this.$router.push(`/taskDetails?id=${item.id}&title=招聘`);
        },
        //判断是否有权限创建
        async isCustomer() {
            let account = sessionStorage.getItem("agentId");
            let res = await this.$api.isCustomer({
                openId: this.wxUserInfo.openid,
                account,
                id: this.$store.state.userInfo.id,
                phone: this.$store.state.userInfo.phone,
            });
            this.isPower = res.data;
            this.info = res.info;
        },
              
         //去创建
        goAdd() {
            if (this.isPower == 3 && this.info != " ") {
                return this.$router.push("/mineInstructions");
            } else if (this.isPower == 3 && this.info == " ") {
                return this.$toast("您的权限不足！");
            }
            if (this.isPower) {
                this.$router.push({ path: "/addRecruitment" });
            }
        },
        returns(){    
            this.$router.back();
        },
        async fabutongji(){
             let obj={
                account:sessionStorage.getItem("agentId"),
                tableType:15,
                userId:sessionStorage.getItem("agentIds")
            }
            let res=await this.$api.fabutongji(obj);
            this.fabutong=res.data
        },
        async getPromotionStatistics(){
            let obj={
                account:sessionStorage.getItem("agentId"),
                tableType:15
            }
            let res =await this.$api.getPromotionStatistics(obj);
            this.tuiguang=res.data
        },
      
         // 获取招聘-立即发布
        async getRecruitss(){
            let obj={
                account:sessionStorage.getItem("agentId"),
                userId:sessionStorage.getItem("agentIds"),
                title:"",
                page:this.page,
                limit:this.limit
            }
            let res=await this.$api.getRecruit(obj);
               //判断是否是第一页
            if (this.page == 1) {
                this.recruitmentArrs = res.data.list || [];
            } else {
                this.recruitmentArrs.push(...res.data.list);
            }
            this.totalPage = res.data.totalPage;
        },
        // 获取招聘-招聘推广
        async getRecruits(){
            let obj={
                account:sessionStorage.getItem("agentId"),
                type:9,
                status:2,
                page:this.page1,
                limit:this.limit1
            }
            let res=await this.$api.getRecruit(obj);
                 //判断是否是第一页
            if (this.page == 1) {
                this.recruitmentArr = res.data.list || [];
            } else {
                this.recruitmentArr.push(...res.data.list);
            }
            this.totalPage = res.data.totalPage;
        },
    }
}
</script>
<style lang="less" scoped>
/deep/.van-empty__image {
  width: 166px;
  height: 139px;
}
.bottom-button {
  width: 130px;
  height: 34px;
  background-color: #477fe6;
  border-radius: 17px;
  border: none;
  font-size: 13px;
  color: #ffffff;
}
.btn{
    width: 60%;
    height: 42px;
    background: #477fe6;
    border-radius: 41px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    margin: 20px auto;
    img{
        width: 15px;
        height: 15px;
        line-height: 30px;
    }
    span{
        margin-left: 5px;
    }
}
.contentsss{
    padding-bottom: 50px;
    .contents-title{
        display: flex;
        justify-content: space-between;
        .content-left{
            display: flex;
            padding: 8px 20px;
            img{
                width: 4px;
                height: 20px;
            }
            span{
                margin:0.5px 10px;
                font-size: 14px;
                color: #3B447A;
            }
        }
        .content-right{
            display: flex;
            span{
              display: block;
              margin-top: 11px;
              font-size: 14px; 
              color: #3B447A;
            }
            .van-icon{
                margin-top: 13px;
                margin-right: 12px;
            }
        }
    }
    .contents-center{
        .contents-center-item{
            display: flex;
            padding: 12px;
            border-bottom: 1px solid ghostwhite;
            .imgs{
                flex: 1;
                width: 90px;
                height: 90px;
                margin-right: 15px;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
                .money {
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    border-radius: none;
                }
            }
            .contents-b-item{
                flex: 3;
                .left{
                    .title{
                        h3{
                            display: block;
                            font-size: 14px;
                            color: #333333;
                        }
                    }
                    .content{
                        margin-top: 2px;
                        p{
                            font-size: 11px;
                            color: #999999;
                            height: 30px;
                            display: -webkit-box;
                            overflow: hidden;
                            -webkit-box-orient: vertical;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                        }
                    }
                    .bottom{
                        display: flex;
                        margin-top: 8px;
                        justify-content: space-between;
                        .lefts{
                            display: flex;
                            img{
                                width: 40px;
                                height: 20px;
                            }
                            .img2{
                                margin-left: 12px;
                            }
                        }
                        .rights{
                            margin-right: 12px;
                        }
                       
                    }
                    .contents-text{
                        display: flex;
                        justify-content: space-between;
                        font-size: 12px;
                        color: #999;
                        .contents-text-item{
                            display: flex;
                            justify-content: space-between;
                            margin-top: 10px;
                            img{
                                width: 12px;
                                height: 12px;
                                margin-top: 2px;
                            }
                            p{
                                margin-left: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
}
.contents{
    .contents-title{
        display: flex;
        padding: 20px;
        img{
            width: 4px;
            height: 20px;
        }
        span{
            margin:0.5px 10px;
            font-size: 15px;
            color: #3B447A;
        }
    }
    .contents-center{
        display: flex;
        justify-content: center;
        margin: 0 15px;
        .contents-center-item1{
            width: 32%;
            height: 80px;
            background: url('../../assets/images/invite/bg1.png');
            background-size:100%;
            background-repeat:no-repeat;
            color: #fff;
            text-align: center;
            line-height: 30px;
            span{
                display: block;
                font-size: 12px;
                margin-top: 3px;
            }
            p{
                display: block;
                font-size: 18px;
            }
        }
        .contents-center-item2{
            width: 32%;
            height: 80px;
            background: url('../../assets/images/invite/bg2.png');
            background-size:100%;
            background-repeat:no-repeat;
            margin-left: 5px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            span{
                display: block;
                font-size: 12px;
                margin-top: 3px;
            }
            p{
                display: block;
                font-size: 18px;
            }
        }
        .contents-center-item3{
            width: 32%;
            height: 80px;
            background: url('../../assets/images/invite/bg3.png');
            background-size:100%;
            background-repeat:no-repeat;
            margin-left: 5px;
            color: #fff;
            text-align: center;
            line-height: 30px;
            span{
                display: block;
                font-size: 12px;
                margin-top: 3px;
            }
            p{
                display: block;
                font-size: 18px;
            }
        }
    }
}
</style>